import React, {Component} from 'react';
import style from './MainHeader.module.css'
import {Avatar, Button, Popover} from "antd";
import {withRouter} from 'react-router-dom'
import {connect} from "react-redux";

class MainHeader extends Component {
  state = {
    text: '',
  };

  render() {
    let {text} = this.state;
    return (
      <div>
        <span style={{fontSize: '20px', color: '#fff', fontWeight: 'bold', cursor: 'pointer'}} onClick={() => {
          this.props.history.push('/main');
        }}>冰雨个人博客</span>
        <div style={{cursor: 'pointer'}} className={style.iconHeader}>
          <Popover placement="bottom" title={text} content={
            <div>
              <p>
                <Button
                  onClick={() => {
                    this.props.history.push('/main/info')
                  }}
                  type="link" primary='true'>个人信息</Button>
              </p>
              <p>
                <Button
                  onClick={() => {
                    this.props.history.push('/main/changePwd')
                  }}
                  type="link" primary='true'>修改密码</Button></p>
              <p>
                <Button
                  onClick={() => {
                    this.props.history.replace('/login')
                  }}
                  type={'danger'}>退出登录</Button>
              </p>
            </div>
          } trigger="click">
            <Avatar src={this.props.userInfo.avatar}>
            </Avatar>
          </Popover>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (userInfoReducer) => {
  return {
    userInfo: userInfoReducer
  }

};


export default connect(mapStateToProps)(withRouter(MainHeader));
